import { Outlet } from 'react-router-dom'
import { useState } from 'react'
import Sidebar from '@/components/navigation/Sidebar'
import Header from '@/components/navigation/Header'
import MobileNav from '@/components/navigation/MobileNav'

const MainLayout = () => {
  const [sidebarOpen, setSidebarOpen] = useState(false)

  return (
    <div className="min-h-screen bg-gradient-to-br from-primary-50/30 via-pink-50/50 to-rose-50/30 relative">
      {/* 背景装饰 */}
      <div className="fixed inset-0 overflow-hidden pointer-events-none">
        <div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-primary-200/10 to-primary-400/5 rounded-full blur-3xl animate-pulse-glow"></div>
        <div className="absolute -bottom-40 -left-40 w-96 h-96 bg-gradient-to-br from-rose-200/10 to-rose-400/5 rounded-full blur-3xl animate-pulse-glow" style={{ animationDelay: '2s' }}></div>
      </div>

      {/* 移动端导航 */}
      <MobileNav isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} />
      
      {/* 桌面端侧边栏 */}
      <Sidebar />
      
      {/* 主内容区域 */}
      <div className="lg:pl-64 relative z-10">
        {/* 顶部导航 */}
        <Header onMenuClick={() => setSidebarOpen(true)} />
        
        {/* 页面内容 */}
        <main className="py-4 sm:py-6 min-h-[calc(100vh-4rem)]">
          <div className="mx-auto max-w-7xl px-3 sm:px-4 lg:px-6 xl:px-8">
            <Outlet />
          </div>
        </main>
      </div>
      
      {/* 移动端遮罩 */}
      {sidebarOpen && (
        <div 
          className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm lg:hidden transition-all duration-300"
          onClick={() => setSidebarOpen(false)}
        />
      )}
    </div>
  )
}

export default MainLayout